<template>
  <div class="card">
    <ul class="main">
      <li class="title">{{ card.title }}</li>
      <li class="nums">
        <span class="size1">{{ card.nums }}</span
        >次
      </li>
      <li class="trends">
        周同比
        <span class="size2" :class="{ down: card.week < 0, up: card.week > 0 }"
          >{{ card.week }}%</span
        >, 日同比
        <span class="size2" :class="{ down: card.day < 0, up: card.day > 0 }"
          >{{ card.day }}%</span
        >
      </li>
    </ul>
    <div class="average">日均访问量 {{ card.average }} 次</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { CardModel } from '../dashboard.d';
export default defineComponent({
  props: {
    card: {
      type: Object as PropType<CardModel>,
      required: true,
    },
  },
  setup() {
    return {};
  },
});
</script>

<style lang="scss" scoped>
.card {
  border: 1px solid #e6e6ee;
  box-shadow: 0 0 2px 1px #e6e6ee;
  padding: 15px;
  box-sizing: border-box;
  color: #333;
  font-size: 14px;
  .main {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
    .title {
      font-size: 12px;
    }
    .nums {
      padding: 13px 0;
    }
    .trends {
      > .up {
        color: red;
      }
      > .down {
        color: green;
      }
    }
    .size1 {
      font-size: 20px;
      margin-right: 3px;
    }
    .size2 {
      margin: 0 2px;
      font-size: 18px;
    }
  }
}
</style>
